<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="${session.title}">123</title>
    <link th:replace="common/header"/>
    <link rel="stylesheet" th:href="@{/css/ace-skins.min.css}"/>
    <link th:replace="common/tip"/>
</head>
<body class="navbar-fixed">
<div th:replace="common/top"></div>
<div class="container-fluid main_bg" id="main-container">
    <a id="menu-toggler" href="#"><span></span></a>
    <div th:replace="common/menu"></div>
    <div id="main-content" class="clearfix">
        <div id="page-content" class="clearfix">
            <div th:replace="common/title"></div>
            <h3 class="header smaller lighter blue"
                th:utext="'<em class=icon-eye-open></em>' + ${session.footUser.nike} + '的碎片管理'">123</h3>
            <div th:if="${session.footUser.qx.text == '会员' || session.footUser.qx.text == 'VIP1' || session.footUser.qx.text == 'VIP2' || session.footUser.qx.text == 'VIP3'}">
                <div class="row-fluid" th:if="${null == footChip}">
                    <!--PAGE CONTENT BEGINS HERE-->
                    <div class="span12">
                        <span th:text="'没有找到' + ${session.footUser.nike} + '的碎片信息'">123</span>
                    </div>
                </div>
                <div th:if="${null != footChip}">
                    <div class="row-fluid">
                        <!--PAGE CONTENT BEGINS HERE-->
                        <div class="span12">
                            <div class="row-fluid">
                                <!--PAGE CONTENT BEGINS HERE-->
                                <div class="span1">
                                    <div class="control-group">
                                        <div class="controls">
                                            &nbsp;
                                        </div>
                                    </div>
                                </div>
                                <div class="span2">
                                    <div class="control-group">
                                        <div class="controls">
                                            <img th:src="@{/images/foot/white.png}" src="" alt=""/>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span12">
                                                    <div class="colockbox">
                                                        <div id="whitedown"></div>
                                                        <span class="hour" id="whiteh"></span>
                                                        <span class="minute" id="whitem"></span>
                                                        <span class="second" id="whites"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6" th:text="'白色碎片数量:' + ${footChip.haveWhile}">123</div>
                                                <div class="span6">
                                                    <button class="btn btn-light btn-mini" type="button" onclick="getChipFalse(1);"
                                                            id="whitebtn" style="display: none;"><em
                                                            class="icon-arrow-left"></em>免费获取
                                                    </button>
                                                </div>

                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    花费10PB直接获取
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-light btn-mini" type="button"
                                                            onclick="getChipTrue(10, 1);"><em
                                                            class="icon-arrow-left"></em>直接获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span3">&nbsp;</div>
                                                <div class="span6" th:if="${footChip.haveWhile >= 5}">
                                                    <button class="btn btn-light btn-mini" type="button"
                                                            onclick="getRandomPerson(1);"><em
                                                            class="icon-arrow-left"></em>合成大众/白人
                                                    </button>
                                                </div>
                                                <div class="span3">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span2">
                                    <div class="control-group">
                                        <div class="controls">
                                            <img th:src="@{/images/foot/green.png}" src="" alt=""/>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span12">
                                                    <div class="colockbox">
                                                        <div id="greendown"></div>
                                                        <span class="hour" id="greenh"></span>
                                                        <span class="minute" id="greenm"></span>
                                                        <span class="second" id="greens"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6" th:text="'绿色碎片数量:' + ${footChip.haveGreen}">123</div>
                                                <div class="span6">
                                                    <button class="btn btn-success btn-mini" type="button" onclick="getChipFalse(2);"
                                                            id="greenbtn" style="display: none;"><em
                                                            class="icon-arrow-left"></em>免费获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    花费30PB直接获取
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-success btn-mini" type="button"
                                                            onclick="getChipTrue(30, 2);"><em
                                                            class="icon-arrow-left"></em>直接获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span3">&nbsp;</div>
                                                <div class="span6" th:if="${footChip.haveGreen >= 10}">
                                                    <button class="btn btn-success btn-mini" type="button"
                                                            onclick="getRandomPerson(2);"><em
                                                            class="icon-arrow-left"></em>合成普通球星
                                                    </button>
                                                </div>
                                                <div class="span3">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span2">
                                    <div class="control-group">
                                        <div class="controls">
                                            <img th:src="@{/images/foot/blue.png}" src="" alt=""/>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span12">
                                                    <div class="colockbox">
                                                        <div id="bluedown"></div>
                                                        <span class="hour" id="blueh"></span>
                                                        <span class="minute" id="bluem"></span>
                                                        <span class="second" id="blues"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6" th:text="'蓝色碎片数量:' + ${footChip.haveBlue}">123</div>
                                                <div class="span6">
                                                    <button class="btn btn-primary btn-mini" type="button" onclick="getChipFalse(3);"
                                                            id="bluebtn" style="display: none;"><em
                                                            class="icon-arrow-left"></em>免费获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    花费50PB直接获取
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-primary btn-mini" type="button"
                                                            onclick="getChipTrue(50, 3);"><em
                                                            class="icon-arrow-left"></em>直接获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span3">&nbsp;</div>
                                                <div class="span6" th:if="${footChip.haveBlue >= 15}">
                                                    <button class="btn btn-primary btn-mini" type="button"
                                                            onclick="getRandomPerson(3);"><em
                                                            class="icon-arrow-left"></em>合成洲际球星
                                                    </button>
                                                </div>
                                                <div class="span3">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span2">
                                    <div class="control-group">
                                        <div class="controls">
                                            <img th:src="@{/images/foot/purple.png}" src="" alt=""/>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span12">
                                                    <div class="colockbox">
                                                        <div id="purpledown"></div>
                                                        <span class="hour" id="purpleh"></span>
                                                        <span class="minute" id="purplem"></span>
                                                        <span class="second" id="purples"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6" th:text="'紫色碎片数量:' + ${footChip.havePurple}">123
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-purple btn-mini" type="button" onclick="getChipFalse(4);"
                                                            id="purplebtn" style="display: none;"><em
                                                            class="icon-arrow-left"></em>免费获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    花费80PB直接获取
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-purple btn-mini" type="button"
                                                            onclick="getChipTrue(80, 4);"><em
                                                            class="icon-arrow-left"></em>直接获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span3">&nbsp;</div>
                                                <div class="span6" th:if="${footChip.havePurple >= 20}">
                                                    <button class="btn btn-purple btn-mini" type="button"
                                                            onclick="getRandomPerson(4);"><em
                                                            class="icon-arrow-left"></em>合成超级球星
                                                    </button>
                                                </div>
                                                <div class="span3">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span2">
                                    <div class="control-group">
                                        <div class="controls">
                                            <img th:src="@{/images/foot/orange.png}" src="" alt=""/>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span12">
                                                    <div class="colockbox">
                                                        <div id="orangedown"></div>
                                                        <span class="hour" id="orangeh"></span>
                                                        <span class="minute" id="orangem"></span>
                                                        <span class="second" id="oranges"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controls">
                                            <div class="row-fluid">
                                                <div class="span6" th:text="'橙色碎片数量:' + ${footChip.haveOrange}">123
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-warning btn-mini" type="button" onclick="getChipFalse(5);"
                                                            id="orangebtn" style="display: none;"><em
                                                            class="icon-arrow-left"></em>免费获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    花费100PB直接获取
                                                </div>
                                                <div class="span6">
                                                    <button class="btn btn-warning btn-mini" type="button"
                                                            onclick="getChipTrue(100, 5);"><em
                                                            class="icon-arrow-left"></em>直接获取
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span3">&nbsp;</div>
                                                <div class="span6" th:if="${footChip.haveOrange >= 30}">
                                                    <button class="btn btn-warning btn-mini" type="button"
                                                            onclick="getRandomPerson(5);"><em
                                                            class="icon-arrow-left"></em>合成顶级球星
                                                    </button>
                                                </div>
                                                <div class="span3">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span1">
                                    <div class="control-group">
                                        <div class="controls">
                                            &nbsp;
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="text-center span12">
                            <a class="btn btn-warning" type="button" th:href="@{/hy/footChip/compose}"><em
                                    class="icon-arrow-left"></em>合成球员</a>
                            <a class="btn" type="button" th:href="@{/index}"><em class="icon-arrow-left"></em>返回首页</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/#page-content-->
        </div>
        <div th:replace="common/skin :: skin"></div>
    </div><!--/#main-content-->
</div><!--/.fluid-container#main-container-->
<div th:replace="common/jsList"></div>
<script th:src="@{/js/jquery.countdown.js}"></script>
<script type="text/javascript" th:inline="javascript">
    function getChipTrue(number, type) {
        $('#tipName').text('您确定要花费' + number + 'PB来抽取碎片吗？');
        $('#tipButton').click(function () {
            getChip(type, true);
        });
        showDialog('layer');
    }

    function getChipFalse(type) {
        getChip(type, false);
    }

    function getChip(type, ispay) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/hy/footChip/addChip",
            data: "id='[[${footChip.id}]]'&type=" + type + "&ispay=" + ispay,
            success: function (data) {
                if (data.msg === 'ok') {
                    refreshPage();
                } else {
                    showTip('tip', data.msg, 4000);
                }
            }
        });
    }

    $(document).ready(function () {
        getDate("whitedown", [[${#dates.format(footLottery.lotteryDateWhite,'yyyy-MM-dd HH:mm:ss')}]], "whitebtn", "whiteh", "whitem", "whites");
        getDate("greendown", [[${#dates.format(footLottery.lotteryDateGreen,'yyyy-MM-dd HH:mm:ss')}]], "greenbtn", "greenh", "greenm", "greens");
        getDate("bluedown", [[${#dates.format(footLottery.lotteryDateBlue,'yyyy-MM-dd HH:mm:ss')}]], "bluebtn", "blueh", "bluem", "blues");
        getDate("purpledown", [[${#dates.format(footLottery.lotteryDatePurple,'yyyy-MM-dd HH:mm:ss')}]], "purplebtn", "purpleh", "purplem", "purples");
        getDate("orangedown", [[${#dates.format(footLottery.lotteryDateOrange,'yyyy-MM-dd HH:mm:ss')}]], "orangebtn", "orangeh", "orangem", "oranges");
    });

    function getDate(id, time, btn, hour, min, sec) {
        $("#" + id)
            .countdown(time, function (event) {
                if (event.strftime('%H:%M:%S') === "00:00:00") {
                    $("#" + btn).show();
                } else {
                    $("#" + btn).hide();
                }
                $("#" + hour).text(
                    event.strftime('%H')
                );
                $("#" + min).text(
                    event.strftime('%M')
                );
                $("#" + sec).text(
                    event.strftime('%S')
                );
            });
    }

    function getRandomPerson(type) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/hy/footChip/compose",
            data: "type=" + type,
            success: function (data) {
                if (null === data) {
                    showTip('tip', '服务器出小差了，请重试', 4000);
                } else {
                    showTip('tip', '获得了' + (data.name === null ? data.yw : data.name), 4000);
                }
                window.setTimeout("refreshPage()", 4000);
            }
        });
    }

    function refreshPage() {
        window.location.reload();
    }

    function keepsession() {
        let href = document.location.href;
        document.location = href.substring(0, href.indexOf("html")) + "html?RandStr=" + Math.random();
    }

    window.setTimeout("keepsession()", 600000);//request the server per 10 mins.
</script>
</body>
</html>
